<style lang="less" scoped>

  .el-row {
    margin-bottom: 20px;
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #ffffff;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .el-form-item {
    margin: 0px 20px 15px 20px;
  }

  .f-bs1 {
    border: 1px solid #dfe6ec;
  }

  .el-collapse {
    border: 0px;
    .el-collapse-item {
      border: 1px solid #dfe6ec;
      margin-bottom: 10px;
      .el-collapse-item__header {
        font-weight: bold;
        .el-collapse-item__header__arrow {
          display: none;
        }
      }
      .el-collapse-item__content {
        padding-bottom: 0px;
      }
      .el-collapse-item__wrap {
        border-bottom: 0px;
      }
    }
  }

  label {
    width: 100px;
  }

  .el-form-item[data-v-7da61f17] {
    margin: 0 0 0 0
  }

  .f-mt10 {
    margin-top: 10px;
  }

  .f-ml20 {
    margin-left: 20px;
  }

  .f-mr20 {
    margin-right: 20px;
  }

  .f-mb10 {
    margin-bottom: 10px;
  }

  .f-tar {
    text-align: right;
  }

  .f-h30 {
    height: 30px;
  }

  .f-c-red {
    color: red;
  }

  .el-radio-group {
    width: 60%;
  }

  .el-radio-invoice {
    margin-right: 30px;
  }

  .f-color {
    color: #25baaf;
  }

  .el-textarea {
    width: 86%;
  }

  .f-mb {
    margin-bottom: 0;
  }

  .f-fr {
    float: right;
  }

  .f-fl {
    float: left;
  }

  .f-lh38 {
    line-height: 38px;
  }

  .el-select {
    width: 100%;
  }

  .f-w233 {
    width: 100%;
  }

  .el-form-item__label {
    width: 150px;
  }

  .el-date-editor.el-input {
    width: 100%;
  }

  li {
    list-style-type: none;
  }

  .color-c8c8c8 {
    color: #c8c8c8;
  }

  .f-mt {
    margin-top: 0;
  }

  .width70 {
    width: 70%;
  }

  .width80 {
    width: 80%;
  }
  .width90 {
    width: 90%;
  }
  .width100 {
    width: 100%;
  }
</style>
<template>
  <section>
    <!--工具条-->
    <search-bar more-display>
      <el-row>
        <el-col :span="8">
          <el-form-item label="线路名称">
            <el-input
                      v-model="searchCondition.LIKE_name" placeholder="请输入线路名称"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="编号">
            <el-input
                      v-model="searchCondition.LIKE_number" placeholder="请输入编号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发布渠道">
            <el-select v-model="searchCondition.EQ_stowageId"
                       :remote="true"
                       :remote-method="searchStowage"
                       @change="searchStowage"
                       :filterable="true"
                       placeholder="请选择">
              <el-option v-for="mu in stowage" :label="mu.name"
                         :key="mu.id"
                         :value="mu.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="发布状态">
            <el-select  v-model="searchCondition.EQ_status"
                       placeholder="请选择">
              <el-option
                v-for="item in $store.getters.TARIFF_RELEASE_STATUS"
                :key="item.dictVal"
                :label="item.cnDictValname"
                :value="item.dictVal">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </search-bar>
    <!-- 操作 -->
    <el-col :span="24" style="margin-bottom: 10px">
      <el-button type="primary" @click="handleAdd">新增</el-button>
      <el-button type="primary" @click="myReset" style="float: right">重置</el-button>
      <el-button type="primary" @click="searchLineRuleFreights" style="float: right">查询</el-button>
    </el-col>
    <!--列表-->
    <el-table :data="tableData" highlight-current-row border @sort-change="sortChange" max-height="650"
              @selection-change="selsChange" v-loading="listLoading" style="width: 100%;">
      <el-table-column type="index" label="序号" width="80" >
      </el-table-column>
      <el-table-column prop="statusName" width="100" label="状态" >
      </el-table-column>
      <el-table-column prop="number" label="编号" width="150" >
      </el-table-column>
      <el-table-column prop="name" label="线路名称" >
      </el-table-column>
      <el-table-column prop="createName" label="创建人" width="140" >

      </el-table-column>
      <el-table-column label="创建时间" width="120">
        <template slot-scope="scope">
          <label v-if="scope.row.createDate != null">
            {{scope.row.createDate.toString().substring(0, 10)}}
          </label>
        </template>
      </el-table-column>

      <el-table-column prop="stowageName" label="发布渠道" >
      </el-table-column>

      <el-table-column label="生效时间" width="120">
        <template slot-scope="scope">
          <label v-if="scope.row.effectiveDate != null">
            {{scope.row.effectiveDate.toString().substring(0, 10)}}
          </label>
        </template>
      </el-table-column>
      <el-table-column label="失效时间" width="120">
        <template slot-scope="scope">
          <label v-if="scope.row.invalidDate != null">
            {{scope.row.invalidDate.toString().substring(0, 10)}}
          </label>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="350">
        <template slot-scope="scope">
          <!--待提交-->
          <el-button  type="primary" class="f-mt10 f-mb10 f-ml5"
                     v-if="scope.row.status===112001001"
                     @click="changeStatuss(scope.row.id, 112001002,'提交审核')">提交审核
          </el-button>
          <el-button  type="primary" class="f-ml5" v-if="scope.row.status===112001001"
                     @click="getDetail(scope.row)">维护运价
          </el-button>
          <el-button  type="primary" class="f-ml5" v-if="scope.row.status===112001001"
                     @click="getEditBYId(scope.$index, scope.row)">编辑
          </el-button>
          <el-button  type="danger" class="f-mb10 f-ml5" v-if="scope.row.status===112001001"
                     @click="handleDel(scope.row.id)">删除
          </el-button>
          <!--待审核-->
          <el-button  type="primary" class="f-ml5" v-if="scope.row.status===112001002"
                     @click="getDetail(scope.row)">明细
          </el-button>
          <el-button  type="primary" class="f-ml5" v-if="scope.row.status===112001002"
                     @click="changeStatuss(scope.row.id, 112001006,'发布')">发布
          </el-button>
          <el-button  type="warning" class="f-ml5" v-if="scope.row.status===112001002"
                     @click="changeStatuss(scope.row.id, 112001001,'撤销')">撤销审核
          </el-button>
          <!--已发布 | 已过期 | 已禁用-->
          <el-button  type="primary" class="f-ml5"
                     v-if="scope.row.status===112001003||scope.row.status===112001005||scope.row.status===112001006"
                     @click="getDetail(scope.row)">明细
          </el-button>
          <!--<el-button  type="warning" class="f-ml5"-->
                     <!--v-if="scope.row.status===112001003"-->
                     <!--@click="changeStatuss(scope.row.id, 112001002,'撤销')">撤销发布-->
          <!--</el-button>-->
          <!--已启用-->
          <el-button  type="primary" v-if="scope.row.status===112001004" class="f-ml5"
                     @click="getDetail(scope.row)">明细
          </el-button>
          <el-button  type="primary" v-if="btns.indexOf('enable_btn')>-1 && scope.row.status===112001006" class="f-ml5"
                     @click="changeStatuss(scope.row.id, 112001004,'启用')">启用
          </el-button>
          <el-button  type="primary" v-if="btns.indexOf('disable_btn')>-1 && scope.row.status===112001004" class="f-ml5"
                     @click="changeStatuss(scope.row.id, 112001006,'禁用')">禁用
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,sizes,prev, pager, next, jumper"
        :total="total" style="float: right">
      </el-pagination>
    </el-col>
    <!--新增优惠线路 弹窗 -->
    <el-dialog :title="dialogTitle"  :visible.sync="lineRuleFreightVisible" :close-on-click-modal="false">
      <el-form :model="LineRuleFreight" :rules="rules" label-width="110px" ref="LineRuleFreight">
        <el-row class="f-mt10 f-mb10">
          <el-col :span="24">
            <el-form-item label="线路名称" class="width70" prop="name">
              <el-input v-model="LineRuleFreight.name" placeholder="请输入线路名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="f-mt10 f-mb10">
          <el-col :span="24">
            <el-form-item label="描述" class="width80" prop="remark">
              <el-input type="textarea" v-model="LineRuleFreight.remark" placeholder="请输入描述"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="f-mt10 f-mb10">
          <el-col :span="24">
            <el-form-item label="发布渠道" class="width70" prop="stowageId">
              <el-select v-model="LineRuleFreight.stowageId"
                         :remote="true"
                         :remote-method="searchStowage"
                         @change="searchStowage"
                         :filterable="true"
                         placeholder="请选择">
                <el-option v-for="mu in stowage" :label="mu.name"
                           :key="mu.id"
                           :value="mu.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="f-mt10 f-mb10">
          <el-col :span="24">
            <el-form-item class="width70" label="生效时间" prop="effectiveDate">

              <el-date-picker
                v-model="LineRuleFreight.effectiveDate"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>

            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="f-mt10 f-mb10">
          <el-col :span="24">
            <el-form-item class="width70" label="失效时间" prop="invalidDate">
              <el-date-picker
                v-model="LineRuleFreight.invalidDate"
                type="datetime"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="f-mt10 f-mb10">
          <el-col :span="8">
            <el-form-item label="运价计算" prop="calculationType">
              <el-select  v-model="LineRuleFreight.calculationType"
                         @change="mySelect" placeholder="请选择">
                <el-option
                  v-for="item in $store.getters.FREIGHT_CALCULATION_TYPE"
                  :key="item.dictVal"
                  :label="item.cnDictValname"
                  :value="item.dictVal">
                </el-option>
              </el-select>

            </el-form-item>
          </el-col>
          <!--乘以比例-->
          <div v-if="LineRuleFreight.calculationType === 112007001">
            <el-col :span="8">
              <el-form-item label="比例" prop="percentage">
                <el-input type="number" v-model.number="LineRuleFreight.percentage" placeholder="请输入比例"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <!--指定金额-->
          <div v-if="LineRuleFreight.calculationType === 112007002">
            <el-col :span="8">
              <el-form-item label="指定金额" prop="amount">
                <el-input type="number" v-model.number="LineRuleFreight.amount" placeholder="请输入指定金额"></el-input>
              </el-form-item>
            </el-col>
          </div>

          <!--乘以比例+指定金额-->
          <div v-if="LineRuleFreight.calculationType === 112007003">
            <el-col :span="8">
              <el-form-item label="比例" prop="percentage">
                <el-input type="number" v-model.number="LineRuleFreight.percentage" placeholder="请输入比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="指定金额" prop="amount">
                <el-input type="number" v-model.number="LineRuleFreight.amount" placeholder="请输入指定金额"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <!--乘以比例-指定金额-->
          <div v-if="LineRuleFreight.calculationType === 112007004">
            <el-col :span="8">
              <el-form-item label="比例" prop="percentage">
                <el-input type="number" v-model.number="LineRuleFreight.percentage" placeholder="请输入比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="指定金额" prop="amount">
                <el-input type="number" v-model.number="LineRuleFreight.amount" placeholder="请输入指定金额"></el-input>
              </el-form-item>
            </el-col>
          </div>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="lineRuleFreightVisible = false">取消</el-button>
        <el-button type="primary" @click.native="handleSubmit" :loading="submitLoading">提交</el-button>
      </div>
    </el-dialog>
    <!--弹出优惠线路详情容-->
    <el-dialog :title="DetailTitle" size="large" :visible.sync="lineRuleFreightDetailVisible" :close-on-click-modal="false">
      <el-form label-width="80px">

        <el-row class="f-mt10 f-mb10">
          <el-col :span="8">
            <el-form-item label="编号" class="width90" prop="name">
              <el-input :disabled="true" v-model="LineRuleFreight.number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">

            <el-form-item label="发布渠道" class="width90" prop="name">
              <el-select v-model="LineRuleFreight.stowageId"
                         :remote="true"
                         :remote-method="searchStowage"
                         @change="searchStowage"
                         :filterable="true"
                         :disabled="true">
                <el-option v-for="mu in stowage" :label="mu.name"
                           :key="mu.id"
                           :value="mu.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="创建人" class="width90" prop="name">
              <el-input :disabled="true" v-model="LineRuleFreight.createName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="f-mt10 f-mb10">
          <el-col :span="8">
            <el-form-item label="发布状态" class="width90" prop="name">
              <el-input :disabled="true" v-model="LineRuleFreight.statusName"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="创建时间" class="width90" prop="name">
              <el-input :disabled="true" v-model="LineRuleFreight.createDate"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="名称" class="width90" prop="name">
              <el-input :disabled="true" v-model="LineRuleFreight.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <search-bar more-display>
        <el-row>
          <el-col :span="8">
            <el-form-item label="目的地">
              <el-input v-model="searchDetailCondition.LIKE_desAddressAll"
                        placeholder="请输入目的地"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="运输方式">
              <el-select  v-model="searchDetailCondition.EQ_agingWay"
                         placeholder="请选择">
                <el-option
                  v-for="item in $store.getters.AGING_CLASSIFICATION"
                  :key="item.dictVal"
                  :label="item.cnDictValname"
                  :value="item.dictVal">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="运价计算">
              <el-select  v-model="searchDetailCondition.EQ_calculationType"
                         placeholder="请选择">
                <el-option
                  v-for="item in $store.getters.FREIGHT_CALCULATION_TYPE"
                  :key="item.dictVal"
                  :label="item.cnDictValname"
                  :value="item.dictVal">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>

      </search-bar>
      <!-- 操作 -->
      <el-col :span="24" style="margin-bottom: 10px;">
        <el-button type="primary" v-if="LineRuleFreight.statusName === '待提交'" @click="addLineRule">新增</el-button>
        <el-button type="primary" @click="exportFiles"  >导出</el-button>
        <el-upload
          style="display: inline-block;margin-left: 10px"
          show-file-list="false"
          :file-list="fileList"
          :on-success="handleOnUploadSuccess"
          :action="'/api/v2.0/admin/line_rule_freights_details/'+currentLineRuleFreight +'/upload' ">
          <el-button  type="primary">导入</el-button>
        </el-upload>
        <el-button type="primary" @click="myResetDetail" style="float: right">重置</el-button>
        <el-button type="primary" @click="searchLineRuleFreightDetail" style="float: right">查询</el-button>
      </el-col>
      <!--优惠线路的详情表格-->
      <el-table :data="lineRuleFreightTableData" highlight-current-row border @sort-change="sortChange1"
                @selection-change="selsChange1" v-loading="listLoading1" style="width: 100%;">
        <el-table-column type="index" label="序号" width="80" >
        </el-table-column>
        <el-table-column prop="orgAddressAll" width="300" label="始发城市" >
        </el-table-column>
        <el-table-column prop="desAddressAll" width="300" label="目地城市" >
        </el-table-column>
        <el-table-column prop="agingWayEntity.cnDictValname" label="时效方式" width="150" >
        </el-table-column>
        <el-table-column prop="calculationTypeEntity.cnDictValname" width="150" label="新运价计算" >
        </el-table-column>
        <el-table-column prop="percentage" label="比例" width="100" >
        </el-table-column>
        <el-table-column prop="amount" label="固定金额" width="120" >
        </el-table-column>
        <el-table-column prop="remark" label="描述" >
        </el-table-column>
        <el-table-column prop="isShow" label="是否开通" >
          <template slot-scope="scope">
            <label v-if="!scope.row.isShow">
              未开通
            </label>
            <label v-if="scope.row.isShow">
              已开通
            </label>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button  v-if="LineRuleFreight.statusName === '待提交'" type="primary"
                       @click="getSaveDetail(scope.$index, scope.row)">编辑
            </el-button>
            <el-button type="danger" v-if="LineRuleFreight.statusName === '待提交'"
                       @click="delLineDettail(scope.$index, scope.row)">删除
            </el-button>
            <el-button type="primary" v-if="btns.indexOf('enable_open_line_detail_btn')>-1 && !scope.row.isShow"
                       @click="openLineDetail(scope.row, '开通优惠线路', true)">开通优惠线路
            </el-button>
            <el-button type="danger" v-if="btns.indexOf('disable_open_line_detail_btn')>-1 && scope.row.isShow"
                       @click="openLineDetail( scope.row, '关闭优惠线', false)">关闭优惠线路
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--工具条-->
      <el-row>
        <el-col :span="24" class="toolbar">
          <el-pagination
            :current-page="currentPage1"
            :page-size="pageSize1"
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            layout="total,sizes,prev, pager, next, jumper"
            :total="total1" style="float: right">
          </el-pagination>
        </el-col>
      </el-row>
    </el-dialog>
    <!--新增 优惠线路详情弹窗-->
    <el-dialog :title="addDetailTitle"  :visible.sync="lineRuleFreightDetail2Visible"
               :close-on-click-modal="false">
      <el-form :model="LineRuleFreightDetail" :rules="rules1" label-width="110px" ref="LineRuleFreightDetail">

        <el-row class="f-mt10 f-mb10">
          <el-col :span="12">
            <el-form-item label="始发城市" prop="orgAddressAll">
              <el-input :disabled="true" v-model="LineRuleFreightDetail.orgAddressAll"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="width70">
              <el-button  type="primary" @click="radiateCityBYId()">添加
              </el-button>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row class="f-mt10 f-mb10">
          <el-col :span="24">
            <el-form-item label="目的地" class="width70" prop="myAddress1">
              <address-select v-model="LineRuleFreightDetail.myAddress1"
                              placeholder="请选择地址"
                              class="f-w233">

              </address-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="f-mt10 f-mb10">
          <el-col :span="24">
            <el-form-item label="运输方式" class="width70" prop="agingWay">
              <el-select  v-model="LineRuleFreightDetail.agingWay"
                         placeholder="请选择">
                <el-option
                  v-for="item in $store.getters.AGING_CLASSIFICATION"
                  :key="item.dictVal"
                  :label="item.cnDictValname"
                  :value="item.dictVal">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="f-mt10 f-mb10">
          <el-col :span="8">
            <el-form-item label="新运价计算" prop="calculationType">
              <el-select  v-model="LineRuleFreightDetail.calculationType"
                         @change="myCalculRest" placeholder="请选择">
                <el-option
                  v-for="item in $store.getters.FREIGHT_CALCULATION_TYPE"
                  :key="item.dictVal"
                  :label="item.cnDictValname"
                  :value="item.dictVal">
                </el-option>
              </el-select>

            </el-form-item>
          </el-col>
          <!--乘以比例-->
          <div v-if="LineRuleFreightDetail.calculationType === 112007001">
            <el-col :span="8">
              <el-form-item label="比例" prop="percentage">
                <el-input type="number" v-model.number="LineRuleFreightDetail.percentage"
                          placeholder="请输入比例"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <!--指定金额-->
          <div v-if="LineRuleFreightDetail.calculationType === 112007002">
            <el-col :span="8">
              <el-form-item label="指定金额" prop="amount">
                <el-input type="number" v-model.number="LineRuleFreightDetail.amount" placeholder="请输入指定金额"></el-input>
              </el-form-item>
            </el-col>
          </div>

          <!--乘以比例+指定金额-->
          <div v-if="LineRuleFreightDetail.calculationType === 112007003">
            <el-col :span="8">
              <el-form-item label="比例" prop="percentage">
                <el-input type="number" v-model.number="LineRuleFreightDetail.percentage"
                          placeholder="请输入比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="指定金额" prop="amount">
                <el-input type="number" v-model.number="LineRuleFreightDetail.amount" placeholder="请输入指定金额"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <!--乘以比例-指定金额-->
          <div v-if="LineRuleFreightDetail.calculationType === 112007004">
            <el-col :span="8">
              <el-form-item label="比例" prop="percentage">
                <el-input type="number" v-model.number="LineRuleFreightDetail.percentage"
                          placeholder="请输入比例"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="指定金额" prop="amount">
                <el-input type="number" v-model.number="LineRuleFreightDetail.amount" placeholder="请输入指定金额"></el-input>
              </el-form-item>
            </el-col>
          </div>
        </el-row>
        <el-row class="f-mt10 f-mb10">
          <el-col :span="24">
            <el-form-item label="描述" class="width80" prop="remark">
              <el-input type="textarea" v-model="LineRuleFreightDetail.remark" placeholder="请输入描述"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="lineRuleFreightDetail2Visible = false">取消</el-button>
        <el-button type="primary" @click="saveLineRuleFreightDetait" :loading="submitLoading1">提交</el-button>
      </div>
    </el-dialog>
    <!--打开辐射 弹窗 -->
    <el-dialog :title="radiateTitle"  :visible.sync="radiateCityVisible" :close-on-click-modal="false">
      <el-table :data="radiateCityTableData" highlight-current-row border
                v-loading="listLoading3" style="width: 100%;">
        <el-table-column type="index" label="序号" width="100" >
        </el-table-column>
        <el-table-column label="管辖范围(区/县)">
          <template slot-scope="scope">
            {{scope.row.province}}   {{scope.row.city}}   {{scope.row.county}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button  type="primary" @click="getEditBYId1(scope.$index, scope.row)">选择
            </el-button>
          </template>
        </el-table-column>

      </el-table>

      <!--工具条-->
      <el-col :span="24" class="toolbar">
        <el-pagination
          :current-page="currentPage3"
          :page-size="pageSize3"
          layout="total,sizes,prev, pager, next, jumper"
          :total="total3" style="float: right">
        </el-pagination>
      </el-col>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelRadiateCity">取消</el-button>
      </div>

    </el-dialog>
  </section>
</template>

<script>
import {
  getByStowageCore
} from '../../api/system/RadiateCity';
import {
  searchStowageCore
} from '../../api/system/stowageCore';
import {
  searchLineRuleFreight,
  saveLineRuleFreight,
  deleteLineRuleFreight,
  batchStart,
  getLineRuleFreight,
  searchLineRuleFreightDetail,
  changeStatus,
  getLineRuleFreightDetail,
  deleteLineRuleFreightDetail,
  saveLineRuleFreightDetail,
  modifyLineRuleFreightDetail
} from '../../api/freight/lineRuleFreight.js';
import {objToFilter, resetObjNull, isEmpty} from '../../lib/util';
import {getOrganizationById} from '../../api/organization/Organization';
export default {
  data () {
    return {
      currentCalculationType: '', // 当前的运价计算
      currentAmount: '', // 当前的指定金额
      currentPercentage: '', // 当前的比例
      radiateCityTableData: [],
      cunnentStowageCoreId: '', // 当前配载中心的ID
      currentLineRuleFreight: '',
      currentOrganizationIds: [],
      newPassword: '',
      searchCondition: {
        LIKE_name: null,
        LIKE_number: null,
        LIKE_effectiveDate: '',
        LIKE_invalidDate: '',
        EQ_status: null,
        EQ_stowageId: null
      },
      searchDetailCondition: {
        EQ_agingWay: null,
        LIKE_desAddressAll: null,
        EQ_calculationType: null
      },
      props1: {
        label: 'name',
        value: 'id',
        children: 'children'
      },
      stowage: [],
      driverInfoSex: [],
      stowageCoreCenter: [],
      stowageCoreCenter2: [],

      sels: [],
      tableData: [],
      total: 0,
      currentPage: 1,
      currentPage1: 1,
      pageSize: 10,
      sortProp: null,
      sortOrder: 'ascending',
      sels3: [],
      total3: 0,
      currentPage3: 1,
      pageSize3: 10,
      sortProp3: null,
      sortOrder3: 'ascending',
      listLoading3: false,
      sels1: [],
      lineRuleFreightTableData: [],
      total1: 0,
      pageSize1: 10,
      sortProp1: null,
      sortOrder1: 'ascending',
      listLoading: false,
      listLoading1: false,
      lineRuleFreightVisible: false,
      radiateCityVisible: false,
      lineRuleFreightDetailVisible: false,
      lineRuleFreightDetail2Visible: false,
      submitLoading: false,
      submitLoading1: false,
      submitLoading3: false,
      dialogTitle: '新增',
      addDetailTitle: '新增',
      radiateTitle: '辐射城市',
      DetailTitle: '新增',
      fileList: [],
      condition: {
        name: '',
        number: ''
      },

      // 优惠线路详情表单数据
      LineRuleFreightDetail: {
        'id': null,
        'originatingCity': '',
        'orgAddressAll': '',
        'destinationCity': '',
        'agingWay': null,
        'calculationType': null,
        'percentage': null,
        'amount': null,
        'lineRuleFreightId': null,
        'remark': null,
        'myAddress': '',
        'myAddress1': []
      },

      // 优惠线路表单数据
      LineRuleFreight: {
        'id': null,
        'number': null,
        'isStart': null,
        'name': null,
        'invalidDateTemp': null,
        'effectiveDateTemp': null,
        'createName': null,
        'modifyDate': null,
        'createDate': null,
        'status': null,
        'effectiveDate': null,
        'invalidDate': null,
        'calculationType': null,
        'percentage': null,
        'amount': null,
        'remark': null,
        'stowageId': null,
        'statusEntity': null,
        'stowageEntity': null,
        'calculationTypeEntity': null,
        'modifyUserObj': null
      },
      // 线路优惠详情验证规则
      rules1: {
        orgAddressAll: [
          {required: true, message: '请选择始发城市', trigger: 'change'}
        ],
        myAddress1: [
          {type: 'array', required: true, message: '请选择目的地', trigger: 'change'}
        ],
        agingWay: [
          {type: 'number', required: true, message: '请选择运输方式', trigger: 'change'}
        ],
        percentage: [
          {type: 'number', required: true, message: '请输入比例', trigger: 'blur'}
        ],
        amount: [
          {type: 'number', required: true, message: '请输入比例', trigger: 'blur'}
        ],
        calculationType: [
          {type: 'number', required: true, message: '请选择新运价计算', trigger: 'change'}
        ]
      },
      // 线路优惠验证规则
      rules: {
        name: [
          {required: true, message: '请输入名称', trigger: 'change'},
          {min: 2, max: 60, message: '长度在2 到 60 个字符', trigger: 'change'}
        ],
        remark: [
          {required: true, message: '请输入描述', trigger: 'blur'},
          {min: 2, max: 60, message: '长度在2 到 60 个字符', trigger: 'blur'}
        ],
        stowageId: [
          {required: true, message: '请选择发布渠道', trigger: 'change'}
        ],
        effectiveDate: [
          {type: 'date', required: true, message: '请选择生效日期', trigger: 'change'}

        ],
        invalidDate: [
          {type: 'date', required: true, message: '请选择失效日期', trigger: 'change'}

        ],
        percentage: [
          {type: 'number', required: true, message: '请输入比例', trigger: 'blur'}
        ],
        amount: [
          {type: 'number', required: true, message: '请输入比例', trigger: 'blur'}
        ],
        calculationType: [
          {type: 'number', required: true, message: '请选择新运价计算', trigger: 'change'}
        ]
      }

    };
  },
  methods: {
    // 辐射城市选择数据操作
    getEditBYId1 (index, row) {
      this.$confirm('确认选择该始发城市吗?', '提示', {
        type: 'warning'
      }).then(() => {
        if (!isEmpty(row.provinceId) && !isEmpty(row.cityId) && !isEmpty(row.countyId)) {
          this.LineRuleFreightDetail.originatingCity = row.provinceId + ',' + row.cityId + ',' + row.countyId + ',';
        }
        if (!isEmpty(row.provinceId) && !isEmpty(row.cityId)) {
          this.LineRuleFreightDetail.originatingCity = row.provinceId + ',' + row.cityId + ',';
        }
        if (!isEmpty(row.province) && !isEmpty(row.city) && !isEmpty(row.county)) {
          this.LineRuleFreightDetail.orgAddressAll = row.province + '-' + row.city + '-' + row.county;
        }
        if (!isEmpty(row.province) && !isEmpty(row.city)) {
          this.LineRuleFreightDetail.orgAddressAll = row.province + '-' + row.city;
        }
        this.radiateCityVisible = false;
      }).catch(() => {
      });
    },
    // 取消选择辐射城市
    cancelRadiateCity () {
      this.LineRuleFreightDetail.originatingCity = '';
      this.LineRuleFreightDetail.orgAddressAll = '';
      this.radiateCityVisible = false;
    },
    // 打开辐射城市窗口
    radiateCityBYId () {
      getByStowageCore({
        page: this.currentPage3,
        size: this.pageSize3,
        filters: '',
        id: this.cunnentStowageCoreId,
        sorts: (this.sortProp3 === null ? '' : (this.sortOrder3 === 'ascending' ? '-' : '+') + this.sortProp3)
      }).then((res) => {
        this.radiateCityVisible = true;
        this.radiateCityTableData = res.data.detailModelList;
        this.currentPage3 = res.data.currPage;
        this.total3 = res.data.totalCount;
        this.pageSize3 = res.data.pageSize;
        this.listLoading3 = false;
      });
    },
    // 线路详情时新运价计算选择时清空
    myCalculRest () {
      this.LineRuleFreightDetail.percentage = '';
      this.LineRuleFreightDetail.amount = '';
    },

    // 弹出线路优惠详情的新增窗口
    addLineRule () {
      this.addDetailTitle = '新增';
      this.LineRuleFreightDetail.originatingCity = '';
      this.LineRuleFreightDetail.orgAddressAll = '';
      this.resetDetaiilForm();
      this.LineRuleFreightDetail.calculationType = this.currentCalculationType;
      this.LineRuleFreightDetail.amount = this.currentAmount;
      this.LineRuleFreightDetail.percentage = this.currentPercentage;
      this.lineRuleFreightDetail2Visible = true;
    },

    //  保存线路优惠详情
    saveLineRuleFreightDetait () {
      if (this.LineRuleFreightDetail.myAddress1.length === 1) {
        return this.$message.error('请最少选择到城市');
      }
      this.LineRuleFreightDetail.destinationCity = this.LineRuleFreightDetail.myAddress1.join(',') + ',';
      this.$refs['LineRuleFreightDetail'].validate((valid) => {
        if (valid) {
          this.LineRuleFreightDetail.lineRuleFreightId = this.currentLineRuleFreight;
          this.submitLoading1 = true;
          saveLineRuleFreightDetail(this.LineRuleFreightDetail).then((res) => {
            this.submitLoading1 = false;
            if (res.data.successFlg === true) {
              this.getDetailTableData();
              this.$message.success('保存/修改成功！');
            } else {
              this.$message.error(res.data.errorMsg);
            }
          }).catch(function (error) {
            console.log(error);
          });
        } else {
          return false;
        }
      });
    },

    /**
       * 根据线路优惠id,更改线路优惠i状态
       */
    changeStatuss (id, status, msg) {
      this.$confirm('更改线路优惠状态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        changeStatus(id, status).then((res) => {
          if (res.data.successFlg) {
            this.$message.success(msg + '成功');
            this.searchLineRuleFreights();
          }
        }).catch(function (error) {
          this.$message.error(msg + '失败');
          console.log(error);
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消' + msg
        });
      });
    },

    // 新运价计算时改变
    mySelect () {
      this.LineRuleFreight.amount = '';
      this.LineRuleFreight.percentage = '';
    },
    // 搜索配载节点
    searchStowage (val) {
      let filters = isEmpty(val) ? '' : 'LIKE_name=' + val;
      searchStowageCore({
        filters: filters,
        sorts: '',
        size: '15',
        page: '1'
      }).then((res) => {
        this.stowage = res.data.detailModelList;
      });
    },

    // 优惠线路 搜索 栏重置
    myReset () {
      resetObjNull(this.searchCondition);
    },
    // 优惠线路详情 搜索 栏重置
    myResetDetail () {
      resetObjNull(this.searchDetailCondition);
    },

    loadingLists (filter) {
      this.listLoading = true;
      searchLineRuleFreight({
        filters: filter,
        size: this.pageSize,
        page: this.currentPage,
        sorts: (this.sortProp === null ? '' : (this.sortOrder === 'ascending' ? '-' : '+') + this.sortProp)
      }).then(res => {
        if (res.data.successFlg) {
          this.tableData = res.data.detailModelList;
          this.currentPage = res.data.currPage;
          this.total = res.data.totalCount;
          this.pageSize = res.data.pageSize;
          this.listLoading = false;
        }
      });
    },

    loadingLists1 (filter) {
      this.listLoading1 = true;
      searchLineRuleFreightDetail({
        filters: filter + ';EQ_lineRuleFreight.id=' + this.currentLineRuleFreight + ';',
        sorts: '',
        page: this.currentPage1,
        size: this.pageSize1
      }).then((res) => {
        if (res.data.successFlg) {
          this.lineRuleFreightTableData = res.data.detailModelList;
          this.currentPage1 = res.data.currPage;
          this.total1 = res.data.totalCount;
          this.pageSize1 = res.data.pageSize;
          this.listLoading1 = false;
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    },
    //      // 优惠线路搜索栏搜索
    searchLineRuleFreights () {
      this.loadingLists(objToFilter(this.searchCondition));
    },
    //      // 优惠线路搜索栏搜索
    searchLineRuleFreightDetail () {
      this.loadingLists1(objToFilter(this.searchDetailCondition));
    },
    // 优惠线路新增数据提交
    handleSubmit () {
      if (!isEmpty(this.LineRuleFreight.effectiveDate)) {
        this.LineRuleFreight.effectiveDate = new Date(this.LineRuleFreight.effectiveDate);
      }
      if (!isEmpty(this.LineRuleFreight.invalidDate)) {
        this.LineRuleFreight.invalidDate = new Date(this.LineRuleFreight.invalidDate);
      }
      this.LineRuleFreight.invalidDateTemp = this.LineRuleFreight.invalidDate.Format('yyyy-MM-dd hh:mm:ss');
      this.LineRuleFreight.effectiveDateTemp = this.LineRuleFreight.effectiveDate.Format('yyyy-MM-dd hh:mm:ss');
      this.$refs['LineRuleFreight'].validate((valid) => {
        if (valid) {
          if (this.LineRuleFreight.effectiveDate > this.LineRuleFreight.invalidDate) {
            return this.$message.error('生效时间不能超过失效时间');
          }
          this.submitLoading = true;
          saveLineRuleFreight(this.LineRuleFreight).then((res) => {
            this.submitLoading = false;
            if (res.data.successFlg === true) {
              this.lineRuleFreightVisible = false;
              this.searchLineRuleFreights();
              this.$message.success('保存/修改成功！');
            } else {
              this.$message.error(res.data.errorMsg);
            }
          }).catch(function (error) {
            console.log(error);
          });
        } else {
          return false;
        }
      });
    },

    //      // 弹出添加窗体
    handleAdd () {
      this.dialogTitle = '新增';
      this.resetForm();
      this.lineRuleFreightVisible = true;
    },
    // 打开线路优惠编辑界面
    getEditBYId (index, row) {
      this.resetForm();
      this.LineRuleFreight = Object.assign({}, row);
      this.currentOrganizationIds = Object.assign([], this.currentOrganizationIds);
      this.EditTitle = '修改';
      this.lineRuleFreightVisible = true;
    },
    // 打开线路优惠详情编辑界面
    getSaveDetail (index, row) {
      this.LineRuleFreightDetail.originatingCity = '';
      this.LineRuleFreightDetail.orgAddressAll = '';
      this.resetDetaiilForm();
      this.LineRuleFreightDetail = Object.assign({
        'id': null,
        'originatingCity': '',
        'destinationCity': '',
        'agingWay': null,
        'calculationType': null,
        'percentage': null,
        'amount': null,
        'lineRuleFreightId': null,
        'desProvinceId': null,
        'desCityId': null,
        'desCountyId': null,
        'provinceId': null,
        'cityId': null,
        'countyId': null,
        'remark': null,
        'myAddress': [],
        'myAddress1': []
      }, row);
      getLineRuleFreightDetail(row.id).then((res) => {
        if (res.data.successFlg) {
          let address = [];
          address.push(res.data.obj.provinceId);
          address.push(res.data.obj.cityId);
          address.push(res.data.obj.countyId);
          let address1 = [];
          address1.push(res.data.obj.desProvinceId);
          address1.push(res.data.obj.desCityId);
          address1.push(res.data.obj.desCountyId);
          this.LineRuleFreightDetail.myAddress = address;
          this.LineRuleFreightDetail.myAddress1 = address1;
        }
      });
      this.addDetailTitle = '修改';
      this.lineRuleFreightDetail2Visible = true;
    },

    // 打开优惠线路详情窗口
    getDetail (row) {
      getLineRuleFreight(row.id).then((res) => {
        if (res.data.successFlg) {
          this.LineRuleFreight = res.data.obj;
          this.cunnentStowageCoreId = res.data.obj.stowageId;
          console.log(res.data.obj);
          this.currentCalculationType = res.data.obj.calculationType;
          this.currentAmount = res.data.obj.amount;
          this.currentPercentage = res.data.obj.percentage;
        }
      });
      searchLineRuleFreightDetail({
        filters: 'EQ_lineRuleFreight.id=' + row.id,
        sorts: '',
        page: this.currentPage1,
        size: this.pageSize1
      }).then((res) => {
        if (res.data.successFlg) {
          this.currentLineRuleFreight = row.id; // 优惠线路当前的ID
          this.lineRuleFreightTableData = res.data.detailModelList;
          this.currentPage1 = res.data.currPage;
          this.total1 = res.data.totalCount;
          this.pageSize1 = res.data.pageSize;
          this.listLoading1 = false;
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
      this.lineRuleFreightDetailVisible = true;
    },

    // 重置线路优惠表单
    resetForm () {
      if (this.$refs.LineRuleFreight) {
        this.$refs.LineRuleFreight.resetFields();
      }
      // 当先点击修改，再点击新增，会出现值没有清空,修复处理
      for (let p in this.LineRuleFreight) {
        if (this.LineRuleFreight[p] instanceof Array) {
          this.LineRuleFreight[p] = [];
        } else {
          this.LineRuleFreight[p] = null;
        }
      }
    },
    resetDetaiilForm () {
      if (this.$refs.LineRuleFreightDetail) {
        this.$refs.LineRuleFreightDetail.resetFields();
      }
      // 当先点击修改，再点击新增，会出现值没有清空,修复处理
      for (let p in this.LineRuleFreightDetail) {
        if (this.LineRuleFreightDetail[p] instanceof Array) {
          this.LineRuleFreightDetail[p] = [];
        } else {
          this.LineRuleFreightDetail[p] = null;
        }
      }
    },

    // 线路优惠删除单条数据操作
    handleDel (row) {
      this.$confirm('确认删除该优惠线路吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        deleteLineRuleFreight(row).then((res) => {
          this.listLoading = false;
          this.$message({
            message: '删除成功！',
            type: 'success'
          });
          this.getTableData();
        });
      }).catch(() => {
      });
    },
    // 开通关闭线路优惠操作
    openLineDetail (row, name, flag) {
      this.$confirm('确认' + name + '吗?', '提示', {
        type: 'warning'
      }).then(() => {
        row.isShow = flag;
        modifyLineRuleFreightDetail(row.id, row).then((res) => {
          if (res.data.successFlg) {
            this.$message.success(name + '成功');
            this.getTableData();
          };
        });
      }).catch(function (error) {
        this.$message.error(name + '失败');
        console.log(error);
      });
    },
    // 线路优惠详情删除单条数据操作
    delLineDettail (index, row) {
      this.$confirm('确认删除该优惠线路详情吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        deleteLineRuleFreightDetail(row.id).then((res) => {
          this.listLoading = false;
          this.$message({
            message: '删除成功！',
            type: 'success'
          });
          this.getDetailTableData();
        });
      }).catch(() => {
      });
    },
    // 单 条停用
    handleStop (index, row) {
      this.$confirm('确认停用该优惠线路吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        let isStart = 111002002;
        batchStart(row.id, isStart).then((res) => {
          this.listLoading = false;
          this.$message({
            message: '停用成功！',
            type: 'success'
          });
          this.getTableData();
        });
      }).catch(() => {
      });
    },

    // 单 条启用
    handleStart (index, row) {
      this.$confirm('确认启用该优惠线路吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        let isStart = 111002001;
        batchStart(row.id, isStart).then((res) => {
          this.listLoading = false;
          this.$message({
            message: '启用成功！',
            type: 'success'
          });
          this.getTableData();
        });
      }).catch(() => {
      });
    },

    // 多选操作
    selsChange (sels) {
      this.sels = sels;
    },
    // 排序操作
    sortChange (o) {
      this.sortProp = o.prop;
      this.sortOrder = o.order;
      this.searchLineRuleFreights();
    },
    // 每页几条操作
    handleSizeChange (val) {
      this.pageSize = val;
      this.searchLineRuleFreights();
    },
    // 第几页操作
    handleCurrentChange (val) {
      this.currentPage = val;
      this.searchLineRuleFreights();
    },

    // 多选操作
    selsChange1 (sels) {
      this.sels1 = sels;
    },
    // 排序操作
    sortChange1 (o) {
      this.sortProp1 = o.prop;
      this.sortOrder1 = o.order;
      this.searchLineRuleFreightDetail();
    },
    // 每页几条操作
    handleSizeChange1 (val) {
      this.pageSize = val;
      this.searchLineRuleFreightDetail();
    },
    // 第几页操作
    handleCurrentChange1 (val) {
      this.currentPage1 = val;
      this.searchLineRuleFreightDetail();
    },
    // 优惠线路导出
    exportFiles () {
      location.href = '/api/v2.0/admin/line_rule_freights_details/' + this.currentLineRuleFreight + '/download';
    },
    // 优惠线路导入成功
    handleOnUploadSuccess (response) {
      this.fileList = [];
      if (response.successFlg) {
        this.getDetailTableData();
        this.$message('导入成功');
      } else {
        this.$message.error(response.errorMsg);
      }
    },
    // 获取优惠线路详情列表
    getDetailTableData () {
      this.listLoading = true;
      searchLineRuleFreightDetail({
        filters: 'EQ_lineRuleFreight.id=' + this.currentLineRuleFreight,
        sorts: '',
        page: this.currentPage,
        size: this.pageSize
      }).then((res) => {
        if (res.data.successFlg === true) {
          this.lineRuleFreightTableData = res.data.detailModelList;
          this.currentPage = res.data.currPage;
          this.total = res.data.totalCount;
          this.pageSize = res.data.pageSize;
          this.listLoading = false;
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    },
    // 获取优惠线路列表
    getTableData () {
      console.log('token:', this.$store.state.token);
      let str = [];
      for (let p in this.condition) {
        if (this.condition[p] !== '' && this.condition[p] !== null) {
          str.push(p + '=' + this.condition[p]);
        }
      }
      this.listLoading = true;
      searchLineRuleFreight({
        filters: '',
        sorts: '',
        page: this.currentPage,
        size: this.pageSize
      }).then((res) => {
        if (res.data.successFlg === true) {
          this.tableData = res.data.detailModelList;
          this.currentPage = res.data.currPage;
          this.total = res.data.totalCount;
          this.pageSize = res.data.pageSize;
          this.listLoading = false;
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    }
  },
  computed: {
    btns () {
      return this.$store.state.btns[this.$route.path] || [];
    },
    querys () {
      return this.$store.state.querys[this.$route.path + '#default'] || [];
    }
  },
  mounted () {
    getOrganizationById(this.$store.state.currentOrganizationId).then(res => {
      if (res.data.successFlg) {
        if (res.data.obj) {
          let ids = Object.assign([], res.data.obj.pids);
          ids.push(res.data.obj.id);
          this.currentOrganizationIds = Object.assign([], ids);
        } else {
          this.currentOrganizationIds = [];
        }
      }
    });
    this.searchStowage();
    this.getTableData();
    this.$store.commit('initOrganizations');
    this.$store.commit('initDict');
  }
};
</script>

<style lang="less">

</style>
